<template>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules"  class="login_form" label-width="0px">
          <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item prop="password">
              <el-input v-model="loginForm.password" prefix-icon="el-icon-postcard" type="password"></el-input>
          </el-form-item>
          <el-form-item class="code" prop="code">
            <el-input  v-model="loginForm.code" size="large" type="text" placeholder="验证码: "></el-input>
          </el-form-item>  
            <img style="float:right; width:150px;height:40px" @click="replace" :src="imgCode" alt="">
          <el-form-item class="btns">
              <el-button type="primary" @click="login" round >登录</el-button>
              <el-button type="register" @click="register" round>注册</el-button>
          </el-form-item>
        </el-form>
</template>

<script>
//导入md5加密方法
import {strToMd5} from '../../util/md5.js'
export default {
  name:"LoginForm",
  data(){
      return {
        //验证码的获取地址
        imgCode:'http://123.57.143.40:8080/javaweb/captcha',
        // 这是登录表单的数据绑定对象
        loginForm:{
          username:'admin',
          password:'123456',
          code:'',
        },
        loginFormRules:{
          username:[  
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password:[{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }],
        },
        
      }
    },
    methods:{
      login()
      {
        this.$refs.loginFormRef.validate(async valid=> {
          if(!valid) return;
          //使用md5方法对密码进行加密
          this.loginForm.password=strToMd5(this.loginForm.password)
          const {data:res}=await this.$http.post("/javaweb/login",this.loginForm);
          if(res.code!=200)return this.$message.error('登录失败！');
          this.$message.success('登录成功！');
          console.log(res);
          window.sessionStorage.setItem('token',res.data);
          window.sessionStorage.setItem('password',this.loginForm.password);
          this.$router.push("/home/welcome");
        });
      },
      register(){
        this.$router.push("register");
      },
      replace (){
		      const num = Math.ceil(Math.random() * 10) // 生成一个随机数（防止缓存）
          //更换验证码的获取地址
		      // this.imgCode = 'http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx/cnValidateImage?byString=' + num
          this.imgCode = 'http://123.57.143.40:8080/javaweb/captcha?byString=' + num
		  },
    }
}
</script>

<style lang="less" scoped>
.code{
  width: 60%;
  display: inline-block
}
.login_form{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns{
  display: flex;
  justify-content:flex-end;
  margin-bottom: 10px;
}
</style>